<template >
      <!-- 选择切换框 tab -->
      <div class="data">
        <ul class="select_btn_list">
          <li class="select_btn" @click="setSelectNumber(0)" :class="{'select_btn_active':selectBtnL == 0}">
            <p>{{ name1 }}</p>
          </li>
          
          <li class="select_btn" @click="setSelectNumber(1)" :class="{'select_btn_active':selectBtnL == 1}">
            <p>{{ name2 }}</p>
          </li>
        </ul>
        <div class="select_content">
          <ul class="content_list" ref="contentListRef">
            <li class="content">
              <slot name="one"></slot>
            </li>
            <li class="content">
              <slot name="two"></slot>
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
export default {
  props:{
    name1:{
      type:String,
      default:'第一个页面',
    },
    name2:{
      type:String,
      default:'第二个页面',
    }
  },
  data() {
      return {
      chartPie:{},
      selectBtnL: 0
    } 
  },
  created(){
    this.chartPie = this.$eChartFn.data11()
  },
  methods:{
    setSelectNumber(i){
      this.selectBtnL = i;
      this.$refs.contentListRef.style.right = 100 * i + '%'
    }
  },
  mounted(){
    this.setSelectNumber(0);
  },
  activated() {
  },
}
</script>



<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
  .main{
    width: calc((100% - 2vw) * 0.24);
    height: calc(((92% - 2vh)  * 0.95 * 0.32) - 4vh );
    background: #050505;
    margin: 50px;
    padding: 1vh 1vw;
  }

  .data{
    .WH();
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
  }
  .select_btn_list{
    .WH(45%,10%);
    display: flex;
    .select_btn{
      .WH(50%);
      background-color: wheat;
      box-sizing: border-box;
      background: #1D3350;
      border-radius: 2px 2px 2px 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      p{
        font-size: 13px;
        font-weight: 600;
        color: rgba(176,224,255,0.6);
        line-height: 12px;

      }
    }
  }
  .select_btn_active{
    border: 1px solid #87CDFF;
    color: rgba(255,255,255,0.8);
    text-shadow: 0px 0px 1px rgba(135,205,255,0.8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .select_content{
    .WH(100%,85%);
    overflow: hidden;
    .content_list{
      .WH(200%,100%);
      display: flex;
      position: relative;
      right: 0%;
      transition: all 0.5s;
      .content{
        .WH();
      }
    }
  }

</style>